<template>
<div class="editcategory-main">
    <el-dialog :visible.sync="dialogVisible">
        <div slot="title" class="title">
            <span v-if="category.id">编辑分类</span>
            <span v-else>新增分类</span>
        </div>
        <div>
            <el-form ref="category" :model="category" label-width="80px">
                <el-row :gutter="10">
                    <el-col :span="8">
                        <el-form-item label="分类名称">
                            <el-input v-model="category.name" placeholder="请输入分类名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="分类描述">
                            <el-input v-model="category.description" placeholder="请输入分类描述"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="关键字">
                            <el-input v-model="category.keywords" placeholder="请输入分类关键字"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col :span="8">
                        <el-form-item label="分类数量">
                            <el-input v-model="category.productCount" placeholder="请输入商品分类数量"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="分类单位">
                            <el-input v-model="category.productUnit" placeholder="请输入商品分类单位"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="分类排序">
                            <el-input v-model="category.sort" placeholder="请输入商品排序"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col :span="8">
                        <el-form-item label="显示在导航栏" label-width="140px">
                            <el-switch v-model="category.navStatus" :active-value="1" :inactive-value="0"></el-switch>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="是否显示">
                            <el-switch v-model="category.showStatus " :active-value="1" :inactive-value="0"></el-switch>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="分类级别">
                            <el-select v-model="category.level" placeholder="请选择级别" @change="levelChange">
                                <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                            <!-- <el-cascader v-model="value" :options="listShow" @change="handleChange"></el-cascader> -->
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="品牌logo">
                    <el-upload class="avatar-uploader" :headers="headers" action="/lejuAdmin/material/uploadFileOss" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="category.icon " :src="category.icon" class="avatar logo">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
            </el-form>

        </div>
        <div slot="footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitCategory">确 定</el-button>
        </div>
    </el-dialog>

</div>
</template>

<script>
import {
    getToken
} from '@/utils/myAuth'
import {
    updateCategory,
    addCategory,
    getAllCategory
} from '@/api/product/category/index'

export default {
    name: 'EditCategory',
    components: {

    },
    data() {
        return {
            category: {
                level: 0,
                parentId: 0
            },
            dialogVisible: false,
            options:[{
                name:'一级分类',
                id:0

            },
            {
                name:'二级分类',
                id:1

            },
            {
                name:'三级分类',
                id:2

            }],
            categoryChildList2: [],
            categoryChildList3: [],

            // listShow: [
            //     {
            //         value: 0,
            //         label: '一级分类',
            //     },
            //      {
            //         value: 1,
            //         label: '二级分类',
            //         children:[]
            //     },
            //     {
            //         value: 2,
            //         lable: '三级分类',
            //         children:[]

            //     }
            // ]

        };
    },
    computed: {
        headers() {
            return {
                token: getToken()
            }
        },

    },
    created() {

        // getAllCategory().then(res => {
        //     console.log(res);
        //     res.data.items.forEach(el => {
        //         if (el.category.level == 1) {
        //             // 二级分类
        //             this.listShow.forEach(ele=>{
        //                 if(ele.value==1){
        //                     var obj={
        //                         value:el.el.category.id,
        //                         lable:''
        //                     }
        //                     ele.children.push(obj)
        //                 }
        //             })

        //             this.categoryChildList2.push(el)
        //         } else if (el.category.level == 2) {
        //             this.categoryChildList3.push(el)
        //         }
        //     })
        //     console.log(this.categoryChildList2, this.categoryChildList3);
        //     // this.categoryChildList=
        // })

    },
    mounted() {

    },
    methods: {

        // init(row){

        //     console.log(row);
        //     this.category=row
        // },
        beforeAvatarUpload(file) {
            // const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 1.5;

            // 正则判断图片的类型格式  ig表示忽略大小
            var reg = /image\/(jpeg|png|gif)/ig

            const isFileTypeOk = reg.test(file.type)

            if (!isFileTypeOk) {
                this.$message.error('上传头像图片只能是 JPG、PNG、GIF 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isFileTypeOk && isLt2M;
        },
        handleAvatarSuccess(res, file) {
            if (res.success) {
                this.category.icon = res.data.fileUrl
            }
        },
        apis(val) {
            val(this.category).then(res => {
                if (res.success) {
                    this.$message.success('成功提交了')
                    this.$router.push({
                        path: '/product/category'
                    })
                    this.dialogVisible = false
                } else {
                    this.$message.error('提交失败！！！')
                }
            })
        },

        submitCategory() {
            console.log(this.category);

            this.$confirm('确认提交吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                if (this.category.id) {

                    this.apis(updateCategory)

                } else {

                    this.apis(addCategory)

                }

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消提交'
                });
            });

        },
        handleChange() {

        },
        // 二级和一级分类
        getCategoryChildList() {
            getAllCategory().then(res => {
                console.log(res);
                res.data.items.forEach(el => {
                    if (el.category.level == 1) {
                        this.categoryChildList2.push(el)
                    } else if (el.category.level == 2) {
                        this.categoryChildList3.push(el)
                    }
                })
                console.log(this.categoryChildList2, this.categoryChildList3);
                // this.categoryChildList=
            })
        },
        levelChange(val) {
            console.log(val);
            // if (val == 0) {
            //     this.category.parentId = '0'
            // } else if (val == 1) {
            //     // this.category.parentId='0'
            //     //二级分类要确定一级父类是who啊--渲染列表-选择一级分类
            //     // this.listShow = this.categoryChildList2

            // } else if (val == 2) {
            //     // 三级分类
            //     // this.listShow = this.categoryChildList2

            //     // this.category.parentId='0'
            // }

        }

    },
};
</script>

<style lang="scss" scoped>
.title {
    font-weight: bolder;
    color: #26A65B;
    font-size: 22px;
}

.avatar-uploader {
    width: 120px;
    height: 120px;
    border: 1px solid #d9d9d9;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 120px;
        height: 120px;
        line-height: 120px;
        text-align: center;
    }

    .avatar {
        width: 120px;
        height: 120px;
        display: block;
        border-radius: 10px;

    }

}
</style>
